<!doctype html>

<html lang="zh">
<head>
    <title>1078</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-card class="box-card my-box">
        <div slot="header" class="clearfix">
            <span>播放器: 本示例仅仅支持 `WebSocket/Http` 协议</span>
        </div>
        <div>
            <el-form size="mini" inline>
                <el-form-item label="视频流协议类型">
                    <el-radio-group v-model="videoProtocolType" size="mini">
                        <el-radio-button :label="'ws'">WebSocket</el-radio-button>
                        <el-radio-button :label="'http'">Http</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="SIM" size="mini">
                    <el-input v-model="sim"/>
                </el-form-item>
                <el-form-item label="逻辑通道号">
                    <el-select v-model="channelNumber"
                               clearable
                               allow-create
                               filterable
                               placeholder="请选择">
                        <el-option
                                v-for="item in formConfig.channelTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <br/>
                <el-form-item label="1078服务IP">
                    <el-input type="text" v-model="jt1078ServerIp" size="mini" style="width: 140px"/>
                </el-form-item>
                <el-form-item label="1078服务端口(HTTP)">
                    <el-input-number v-model="jt1078ServerPortHttp" :controls="false" size="mini"
                                     style="width: 80px"/>
                </el-form-item>

                <el-form-item label="音频类型">
                    <el-select v-model="sourceAudioHints" placeholder="未指定" filterable clearable>
                        <el-option-group
                                v-for="group in formConfig.audioTypes"
                                :key="group.groupName"
                                :label="group.groupName">
                            <el-option
                                    v-for="item in group.options"
                                    :key="item.name"
                                    :label="item.desc"
                                    :value="item.name">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>

                <br/>
                <el-form-item label="VideoUrl" size="mini">
                    <el-input v-model="videoUrl" type="textarea" autosize disabled
                              style="width: 860px;font-size: 16px"/>
                </el-form-item>
                <br/>
                <el-button type="primary" size="mini" @click="play">播放 / 重新初始化播放器</el-button>
            </el-form>
            <video id="videoElement" width="640" height="480" controls autoplay
                   style="border: 3px solid #26cfee"></video>
        </div>
    </el-card>
</div>

</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.js"></script>
<script src="./js/mpegts.js"></script>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            player: undefined,
            playing: false,
            //
            sim: "015900110001",
            videoProtocolType: "ws",
            channelNumber: 2,
            jt1078ServerIp: "127.0.0.1",
            jt1078ServerPortHttp: 1078,
            sourceAudioHints: "未指定",
            formConfig: {
                audioTypes: [
                    {
                        groupName: "默认", options: [{name: "未指定", desc: "自动"}]
                    },
                    {
                        groupName: "静音", options: [{name: "SILENCE", desc: "静音(服务端忽略音频数据)"}]
                    },
                    {
                        groupName: "G711", options: [
                            {name: "G711_A_MONO", desc: "G711_A_MONO"},
                            {name: "G711_U_MONO", desc: "G711_U_MONO"},
                        ]
                    },
                    {
                        groupName: "G726", options: [
                            {name: "G726_S16_LE_MONO", desc: "G726_S16_LE_MONO"},
                            {name: "G726_S24_LE_MONO", desc: "G726_S24_LE_MONO"},
                            {name: "G726_S32_LE_MONO", desc: "G726_S32_LE_MONO"},
                            {name: "G726_S40_LE_MONO", desc: "G726_S40_LE_MONO"},
                        ]
                    },
                    {
                        groupName: "ADPCM", options: [{name: "ADPCM_IMA_MONO", desc: "ADPCM_IMA_MONO"},]
                    }

                ],
                channelTypes: [
                    {value: 1, label: "通道1--驾驶员--音视频/视频"},
                    {value: 2, label: "通道2--车辆正前方--音视频/视频"},
                    {value: 3, label: "通道3--车前门--音视频/视频"},
                    {value: 4, label: "通道4--车厢前部--音视频/视频"},
                    {value: 5, label: "通道5--车厢后部--音视频/视频"},
                    {value: 6, label: "通道6--车后门--音视频/视频"},
                    {value: 7, label: "通道7--行李舱--音视频/视频"},
                    {value: 8, label: "通道8--车辆左侧--音视频/视频"},
                    {value: 9, label: "通道9--车辆右侧--音视频/视频"},
                    {value: 10, label: "通道10--车辆正后方--音视频/视频"},
                    {value: 11, label: "通道11--车厢中部--音视频/视频"},
                    {value: 12, label: "通道12--车中部--音视频/视频"},
                    {value: 13, label: "通道13--驾驶席车门--音视频/视频"},
                    {value: 33, label: "通道33--驾驶员--音频"},
                    {value: 36, label: "通道36--车厢前部--音频"},
                    {value: 37, label: "通道37--车厢后部--音频"},
                ],
            },
        },
        created: function () {
            this.jt1078ServerPortHttp = window.location.port
        },
        computed: {
            videoUrl: function () {
                return this.constructUrl()
            },
        },
        methods: {
            play: function () {
                this.recreatePlayer()
                this.player.play();
                this.playing = true
            },
            constructUrl: function () {
                var url = this.videoProtocolType
                    + "://"
                    + this.jt1078ServerIp
                    + ":"
                    + this.jt1078ServerPortHttp
                    + "/jt1078/subscription/"
                    + (this.videoProtocolType === 'ws' ? 'websocket' : 'http')
                    + "/flv/"
                    + this.sim
                    + "/" + this.channelNumber
                    + "?timeout=10000";
                if (this.sourceAudioHints && this.sourceAudioHints !== "" && this.sourceAudioHints !== "未指定") {
                    url += "&sourceAudioHints=" + this.sourceAudioHints;
                }
                return url
            },
            recreatePlayer: function () {
                const element = document.getElementById('videoElement');
                if (this.player != null) {
                    this.player.unload();
                    this.player.detachMediaElement();
                    this.player.destroy();
                }
                const url = this.constructUrl()
                this.player = mpegts.createPlayer({
                    isLive: true,
                    type: 'flv',
                    url: url,
                    hasAudio: this.sourceAudioHints !== "SILENCE",
                    hasVideo: true,
                    enableWorker: true,
                    enableStashBuffer: false,
                    stashInitialSize: 128    // 减少首桢显示等待时长
                });
                this.player.attachMediaElement(element);
                this.player.load();
            },
        },
        watch: {}
    })
</script>
<style type="text/css">
    .my-box {
        margin-bottom: 10px;
    }
</style>
</html>
